<template>
  <div class="abnormal">
    <div class="head">
      指标超限预警
      <a-button
        type="primary"
        size="small"
        @click="
          () => {
            getAbnormals(1);
            state.showAbnormals = true;
          }
        "
      >
        详情
      </a-button>
    </div>
    <table>
      <thead>
        <tr>
          <td>预警时间</td>
          <td>指标超限</td>
          <td>预警等级</td>
          <td>处理</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in state.unDealAbnormals" :key="item.id">
          <td>{{ item.date }}</td>
          <td>{{ item.event }}</td>
          <td>{{ item.level }}</td>
          <td>
            <a-button type="link" size="small" @click="handleDeal(item)">
              <template #icon><form-outlined /></template>
            </a-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <a-modal
    v-model:visible="state.showAbnormals"
    title="指标超限预警"
    :footer="null"
    :width="800"
    @cancel="state.showAbnormals = false"
    destroyOnClose
  >
    <a-table
      :dataSource="state.abnormals"
      :columns="[
        {
          title: '预警时间',
          dataIndex: 'date',
          key: 'date',
          align: 'center',
          width: 160,
        },
        {
          title: '指标超限',
          dataIndex: 'event',
          key: 'event',
          ellipsis: true,
        },
        {
          title: '预警等级',
          dataIndex: 'level',
          key: 'level',
          align: 'center',
          width: 100,
        },
        {
          title: '状态',
          dataIndex: 'complete',
          key: 'complete',
          align: 'center',
          width: 100,
        },
      ]"
      bordered
      size="small"
      rowKey="id"
      :pagination="state.pager"
      @change="onTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'complete'">
          <a-tag :color="record.complete ? 'green' : 'volcano'">
            {{ record.complete === 0 ? "未处理" : "已处理" }}
          </a-tag>
        </template>
      </template>
    </a-table>
  </a-modal>
  <FormModal :formConfig="state.formConfig" ref="dialogRef" @submit="submit" />
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted, watch } from "vue";
import _ from "lodash";
import FormModal from "@/components/FormModal.vue";

const dialogRef = ref();

const state = reactive({
  // 未处理异常
  unDealAbnormals: [],
  // 是否显示所有异常弹窗
  showAbnormals: false,
  // 所有异常
  abnormals: [],
  // 所有异常分页
  pager: {
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: false,
    size: "normal",
  },
  // 处理弹窗配置
  formConfig: {
    title: "指标超限预警处理",
    items: [
      {
        type: "hidden",
        name: "id",
      },
      {
        label: "原因分析",
        type: "textarea",
        name: "reason",
        maxlength: 500,
        rows: 5,
        span: 24,
        rules: [
          {
            required: true,
            message: "请输入原因分析",
          },
        ],
      },
      {
        label: "改进方案",
        type: "textarea",
        name: "improvePlan",
        maxlength: 500,
        span: 24,
        rows: 5,
        rules: [
          {
            required: true,
            message: "请输入改进方案",
          },
        ],
      },
    ],
  },
});

const { proxy } = getCurrentInstance();

onMounted(() => {
  getUnDealAbnormals();
});

// 获取前2条未处理异常
const getUnDealAbnormals = async () => {
  const { success, data } = await proxy.$axios.get("/alarm", {
    params: { pageNumber: 1, pageSize: 2, complete: 0 },
  });
  if (success) {
    state.unDealAbnormals = data.content;
  }
};

// 处理异常
const handleDeal = ({ id }) => {
  dialogRef.value.handleOpenForm({ id });
};

// 处理异常提交
const submit = (values) => {
  proxy
    .$axios({ method: "put", data: values, url: `/alarm/${values.id}` })
    .then(({ success, msg }) => {
      if (success) {
        dialogRef.value.cancel();
        proxy.$message.success("处理成功");
        getUnDealAbnormals();
      }
    });
};

// 获取所有异常
const getAbnormals = async (page = 1) => {
  const { success, data } = await proxy.$axios.get("/alarm", {
    params: { pageNumber: page, pageSize: 10 },
  });
  if (success) {
    const { content, totalElements } = data;
    state.abnormals = content;
    state.pager.current = page;
    state.pager.total = totalElements;
  }
};

// 处理异常分页
const onTableChange = ({ current }) => {
  getAbnormals(current);
};
</script>

<style lang="less" scoped>
.abnormal {
  width: 100%;
  height: 100%;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.5);

  .head {
    display: flex;
    justify-content: space-between;
    align-self: center;
    padding: 4px;
  }

  table {
    width: 100%;
  }

  table,
  th,
  td {
    border: 1px solid #f8f8f8;
    text-align: center;
  }
}
</style>
